<template>
  <div>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart2'
    },
    width: {
      type: String,
      default: '400px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      valueYear: '',
      valueMonth: '',
      valueDate: '',
      searchForm: {
        type: '3',
        times: new Date(new Date()).Format('yy-MM')
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(newFrom) {
      if (newFrom != undefined) this.searchForm = newFrom
      this.chart = echarts.init(document.getElementById(this.id))
      this.$api.statistics(this.searchForm).then(res => {
        let objLin = {
          xAxis: {
            data: [],
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: '金额',
              itemStyle: {
                normal: {
                  color: '#52C41A',
                  lineStyle: {
                    color: '#52C41A',
                    width: 2
                  },
                  areaStyle: {
                    color: '#D7EFE9'
                  }
                }
              },
              smooth: true,
              type: 'line',
              data: [],
              animationDuration: 2800,
              animationEasing: 'cubicInOut'
            }
          ]
        }
        objLin.series.forEach(element => {
          element.data = res.data.data.series[0].data
        })
        objLin.xAxis.data = res.data.data.data
        this.chart.setOption(objLin)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
